<template>
  <div class="dynamic">
    <div class="top">
      <div>
        <img :src="data.userPic">
      </div>
      <div>
        <div>{{data.userName}}</div>
        <div>
          <span>
            <yd-icon :name="picName" custom slot="icon" ></yd-icon>
            <span>{{data.identityIabel}}</span>
          </span>
          <span>
            <yd-icon name="zhan" custom slot="icon" ></yd-icon>
            <span>{{data.countLike}}</span>
          </span>
          <span>
            <yd-icon name="comment" custom slot="icon" ></yd-icon>
            <span>{{data.num}}0</span>
          </span>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="bottom">
      <p @click="details()">{{data.title}}</p>
      <yd-lightbox v-show="show">
        <div v-for="(item,index) in data.imgs" :key="index">
          <yd-lightbox-img :src="ip+item.url"/>
        </div>
      </yd-lightbox>
    </div>
  </div>
</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'
  import {LightBox, LightBoxImg, LightBoxTxt} from 'vue-ydui/dist/lib.rem/lightbox'
  export default {
    compontents:{
      'yd-icon':Icons,
    },
    data(){
      return {
        picName:null,
        show:false,
        ip:this.$store.state.ip
      }
    },
    methods:{
      identityIabel(){
        switch (this.data.identityIabel)
        {
          case '社区达人':
            this.picName = 'identityIabelA';
            break;
          case '积极分子':
            this.picName = 'identityIabelB';
            break
        }
      },
      imgShow(){
//        console.log(this.data)
        if(this.data.imgs.length>0&&this.show==false){
          this.show = true
        }else {
          this.show = false
        }
      },
      details() {   //判断文章类型后往文章内容跳转
        var con = '';
        var contentType = this.data.contentType;
        switch (contentType) {
          case 'News':
            con = 'news';
            break;
          case 'Text':
            con = 'text';
            break;
          case 'Video':
            con = 'video';
            break;
        }
        this.$store.commit('videoContent',this.data)
        this.$router.push({name: con + 'Content', params: {data: this.data}})
      },
    },
    props:['data'],
    created(){
      this.identityIabel();
      this.imgShow();
//      this.ip = this.$store.state.ip;
      console.log(this.data)
    },
  }

</script>
<style lang="less" scoped>
@import "~less/base";
  .dynamic{
    width: 100%;
    margin-bottom: 0.1rem;
    /*border-bottom: 0.05rem solid #c2c2c2;*/
    .top{
      >div:nth-child(1){
        margin-top: 0.14rem;
        margin-left: 0.24rem;
        margin-right: 0.2rem;
        width: 0.96rem;
        height: 0.96rem;
        float: left;
        border-radius: 50%;
        overflow: hidden;
        border: 0.04rem solid @read-userPic;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      >div:nth-child(2){
        float: left;
        width: 80%;
        margin-top: 0.1rem;
        >div:nth-child(1){
          font-size: 14px;
          line-height: 0.5rem;
        }
        >div:nth-child(2){
          width: 100%;
          >span{
            float: left;
            margin-top: 0.1rem;
            font-size: 12px;
            display: inline-block;
            width: 33%;
            height: 0.65rem;
            line-height: 0.65rem;
            color: @read-timeColor;
            >i{
              color: #ffa116;
              font-size: 0.36rem!important;
              margin-right: 0.1rem;
            }
          }
        }
      }
    }
    .bottom{
      padding-bottom: 0.2rem;
      >p{
        font-size: 16px;
        letter-spacing: 1px;
        width: 95%;
        margin-left: 50%;
        margin-top: 0.1rem;
        line-height: 20px;
        transform: translateX(-50%);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      >div{
        width: 95%;
        height: 1.66rem;
        overflow: hidden;
        margin-left: 50%;
        transform: translateX(-50%);
        >div{
          width: 33%;
          margin-top: 0.2rem;
          text-align: center;
          display: inline-block;
          >img{
            width: 2.2rem;
            height: 1.34rem;
          }
        }

      }
    }
  }
  .clear{
    clear: both;
  }
</style>
